<template>
    <view class="container">
        <view class="data-list">
            <view :id="'t' + item.id" class="item" v-for="(item, index) in dataList" :key="item.id"
                @click="onClickArticle(item, index)">
                <view class="thumb" :style="{ backgroundImage: `url(${item.url})` }">
                </view>

                <view class="title">
                    {{ item.title }}
                </view>
                <view class="desc">
                    <view>
                        {{item.read_num}}看过
                    </view>
                    <view>{{ item.create_time}}
                    </view>
                </view>
            </view>
        </view>

        <!-- 加载状态提示 -->
        <view class="loading" v-if="loading && dataList.length > 0">
            <view class="loading-icon"></view>
            <text>加载中...</text>
        </view>
        <view class="no-more" v-if="!hasMore && dataList.length > 0">
            没有更多数据了
        </view>

        <Message ref="message"></Message>
    </view>
</template>

<script>
    import viewModule from "@/common/mixins/view-module";

    import Upload from "@/components/public/upload";
    import {
        stringToJSON
    } from "@/utils";
    import {
        getArticleList,
    } from "@/common/api/service-provider.js";
    export default {
        mixins: [viewModule],
        components: {
            Upload,
        },
        data() {
            return {
                dataList: [],
                page: 1, // 当前页码
                limit: 10, // 每页数量
                hasMore: true, // 是否还有更多数据
                loading: false // 是否正在加载中
            };
        },
        methods: {
            /**
             * 获取文章列表
             * @param {Boolean} isLoadMore 是否是加载更多
             */
            getArticleList(isLoadMore = false) {
                // 如果正在加载或没有更多数据，则返回
                if (this.loading || !this.hasMore) return;

                // 如果是加载更多，则增加页码
                if (isLoadMore) {
                    this.page++;
                } else {
                    // 否则重置页码
                    this.page = 1;
                }

                this.loading = true;

                getArticleList({
                    page: this.page,
                    limit: this.limit
                }).then((res) => {
                    this.loading = false;

                    // 处理数据
                    if (isLoadMore) {
                        // 加载更多，拼接数据
                        this.dataList = [...this.dataList, ...res.data];
                    } else {
                        // 重新加载，替换数据
                        this.dataList = res.data;
                    }

                    // 判断是否还有更多数据
                    // 假设当返回的数据少于每页数量时，表示没有更多数据了
                    this.hasMore = res.data.length >= this.limit;
                }).catch((err) => {
                    this.loading = false;
                    // 如果是加载更多失败，恢复页码
                    if (isLoadMore) {
                        this.page--;
                    }
                    // 显示错误提示
                    this.$refs.message.error('加载失败，请重试');
                    console.error('获取文章列表失败:', err);
                });
            },
            onClickArticle(item, index) {
                this.$Router.push({
                    path: "/pages/maintenance/articleDetail",
                    query: {
                        id: item.id,
                    },
                });
            },
        },
        // 页面滚动到底部时触发
        onReachBottom() {
            // 延迟加载，避免频繁触发
            setTimeout(() => {
                this.getArticleList(true);
            }, 300);
        },
        // 下拉刷新
        onPullDownRefresh() {
            // 重新加载第一页数据
            this.getArticleList().then(() => {
                // 停止下拉刷新动画
                uni.stopPullDownRefresh();
            });
        },
        onLoad(q) {
            this.getArticleList();
        },
    };
</script>

<style lang="stylus" scoped>
    @import '~@/common/stylus/base';
    @import '~@/common/stylus/mixins';

    .container {
        min-height: calc(100vh - var(--window-top));
        background: linear-gradient(180deg, #0D1523 0%, #102945 100%);
    }

    .data-list {
        width: 750rpx;
        display: flex;
        flex-wrap: wrap;
        margin: 20rpx;

        .item {
            display: inline-block;
            width: 320rpx;
            height: 390rpx;
            background: #3F5270;
            border-radius: 4rpx;
            margin-bottom: 20rpx;
            margin-left: 20rpx;

            &:last-child {
                margin-right: 24rpx;
            }

            >.thumb {
                width: 320rpx;
                height: 220rpx;
                background-size: cover;
                margin-bottom: 4rpx;
            }

            >.title {
                width: 280rpx;
                height: 70rpx;
                font-size: 24rpx;
                flex-wrap: wrap;
                color: white;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: bold;
                margin: 20rpx 20rpx;
                /* 多行文本省略样式 */
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            >.desc {
                width: 320rpx;
                height: 24rpx;
                font-size: 24rpx;
                color: #fff;
                margin-top: 10rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 20rpx
            }
        }
    }

    /* 加载状态样式 */
    .loading {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30rpx 0;
        color: #fff;
        font-size: 24rpx;

        .loading-icon {
            width: 30rpx;
            height: 30rpx;
            border: 2rpx solid #fff;
            border-bottom-color: transparent;
            border-radius: 50%;
            animation: loading 1s linear infinite;
            margin-right: 15rpx;
        }
    }

    .no-more {
        text-align: center;
        padding: 30rpx 0;
        color: #ccc;
        font-size: 24rpx;
    }

    /* 加载动画 */
    @keyframes loading {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
</style>